@use "../abstracts/mixins";
@use "../base/breakpoints";

$background-outset: 0.7rem;

#tasks,
.tasks,
.subtasks {
  display: flex;
  flex-direction: column;
  margin: 0 var(--section-padding) var(--section-padding) var(--section-padding);
  gap: 0.125rem;

  @media (min-width: breakpoints.$tablet-breakpoint) {
    margin-right: calc($background-outset);
  }
}

.subtasks {
  margin-top: 5px;
  margin-bottom: 0;

  &:empty {
    display: none;
  }
}

#side-panel {
  .jenkins-app-bar {
    margin-left: var(--section-padding);
    margin-right: var(--section-padding);
  }

  & > #tasks > .jenkins-search-container {
    margin: 0 #{-$background-outset} 1rem;

    .jenkins-search__icon {
      width: 2.8rem;
      aspect-ratio: unset;
    }

    .jenkins-search__input {
      padding-left: 2.6rem;
    }
  }
}

#tasks,
.tasks {
  .task {
    margin: 0 calc($background-outset * -1);

    .task-link {
      @include mixins.item;

      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0.5rem $background-outset;
      gap: 0.65rem;
      width: 100%;
      font-size: var(--font-size-sm);
      color: var(--text-color);
      margin: 0;
      transition: opacity var(--standard-transition);

      .task-icon-link {
        display: inline-flex;

        svg,
        img {
          width: 1.375rem !important;
          height: 1.375rem !important;
          color: var(--text-color);

          * {
            transition: stroke-width var(--standard-transition);
          }
        }
      }

      .task-icon-badge {
        margin-left: auto;
      }

      .task-link-text {
        display: contents;
        word-break: word-break;
      }

      &--active {
        font-weight: 450;
        cursor: default;

        svg * {
          stroke-width: 35px;
        }

        &::before {
          background-color: var(--item-background--active) !important;
        }

        &::after {
          box-shadow: none !important;
        }
      }

      &:not(:hover, &:active, &:focus, &--active) {
        &::before {
          border-color: transparent;
        }
      }
    }
  }
}
